<template>
  <Drawer
      v-model="visible"
      title="工程信息编辑"
      width="450"
      :mask-closable="false"
      :styles="$PnUtil.buildDrawerStyleByHasFooter()">
    <Form ref="form" :label-width="80" :model="formData" :rules="ruleValidate">
      <FormItem label="id" prop="id" hidden>
        <Input v-model="formData.id"/>
      </FormItem>
      <FormItem label="工程名称" prop="name">
        <Input v-model="formData.name" placeholder="请输入工程名称"/>
      </FormItem>
      <FormItem label="主题方案" prop="echart_theme_id">
        <Alert v-show="formData.id" type="info" show-icon style="padding-right: 10px;">
          注意：修改工程主题方案将会对该工程下的所有页面的主题进行覆盖重设，请谨慎操作！！！
        </Alert>
        <Select transfer v-model="formData.echart_theme_id" :filterable="true">
          <Option v-for="item in echartThemes" :value="item.value" :key="item.value" :label="item.label">
            <span>{{ item.label }}</span>
            <span v-if="item.is_sys == '1'" style="color: #009688;">（系统主题）</span>
            <div style="width: 100%; height: 30px;">
              <div style="width: 30px; height: 100%; float: left; text-align: center;" :style="{backgroundColor: color}"
                   v-for="(color, index) in item.colors" :key="index">
                <span v-if="!color" style="line-height: 30px;">X</span>
              </div>
            </div>
          </Option>
        </Select>
      </FormItem>
      <FormItem label="备注" prop="remark">
        <Input v-model="formData.remark" type="textarea" :rows="5"/>
      </FormItem>
    </Form>
    <DrawerFooter>
      <Button class="m-r-5px" @click="visible = false">关闭</Button>
      <Button type="primary" @click="submitForm" :loading="loading">保存</Button>
    </DrawerFooter>
  </Drawer>
</template>

<script>
import ManageMixin from "@/mixin/ManageMixin";

export default {
  name: 'ProjectForm',
  mixins: [ManageMixin],
  data() {
    return {
      visible: false,
      loading: false,
      formData: {
        id: '',
        name: '',
        remark: '',
        echart_theme_id: '',
        user_id: ''
      },
      ruleValidate: {
        name: [
          {required: true, message: '工程名称不能为空', trigger: 'blur'}
        ],
        echart_theme_id: [
          {required: true, message: '主题方案不能为空', trigger: 'blur'}
        ]
      },
      echartThemes: []
    }
  },
  mounted() {

  },
  methods: {
    init(type, id) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.echartThemes = []
        if (type == 'edit') {
          this.$PnApi.ProjectApi.getProjectById(id).then(result => {
            this.formData = this.recover(this.formData, result.data.payload)
          })
        }
        this.$PnApi.EchartThemeApi.getAllEchartTheme().then(result => {
          result.data.payload.forEach(item => {
            this.echartThemes.push({
              is_sys: item.is_sys,
              label: item.name,
              value: item.id,
              colors: JSON.parse(item.json_text).color
            })
          })
        })
      })
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$PnApi.ProjectApi.saveProject(this.formData).then(result => {
            if (result.data.success) {
              this.visible = false
              this.$Message.success(result.data.message)
              this.$emit("refreshDataList")
            }else {
              this.$Message.error(result.data.message)
            }
            this.loading = false
          })
        }
      });
    }
  },
  computed: {}
}
</script>

<style scoped>

</style>
